<template>
  <div class="manager-center-page">
    <div class="manger-form-body">
      <div class="manger-form-body-col">
        <div class="title">横屏</div>
        <el-upload
          class="upload-demo"
          drag
          :on-success="horizontalUploadSuccess"
          :action="uploadUrl"
          :before-upload="beforeAvatarUpload"
          :accept="imageFormat"
          :show-file-list="false"
          @drop.native="e => beforeUploadFile(e.dataTransfer.files[0])"
        >
          <img v-if="horizontalImage" :src="horizontalImage" class="avatar">
          <i v-if="!horizontalImage" class="el-icon-upload"></i>
          <div v-if="!horizontalImage" class="title">只支持上传分辨率为1920*1080的图片</div>
          <div v-if="!horizontalImage" class="title">将文件按拖到此处，或<a>点击上传</a></div>
        </el-upload>
      </div>
      <div class="manger-form-body-col">
        <div class="title">竖屏</div>
        <el-upload
          class="upload-demo"
          drag
          :on-success="verticalUploadSuccess"
          :action="uploadUrl"
          :before-upload="beforeAvatarUpload"
          :accept="imageFormat"
          :show-file-list="false"
          @drop.native="e => beforeUploadFile(e.dataTransfer.files[0])"
        >
          <img v-if="verticalImage" :src="verticalImage" class="avatar">
          <i  v-if="!verticalImage" class="el-icon-upload"></i>
          <div v-if="!verticalImage" class="title">只支持上传分辨率为1080*1920的图片</div>
          <div v-if="!verticalImage" class="title">将文件按拖到此处，或<a>点击上传</a></div>
        </el-upload>
      </div>
    </div>

    <div class="buttonContainer">
      <el-button type="primary" class="tongbu-button" @click="syncFile">同步至所有终端</el-button>
    </div>
  </div>
</template>

<script>
import * as service from './service'
export default {
  data() {
    return {
      verticalImage: "",
      horizontalImage: "",
      imageFormat: ".jpg,.png,.jpeg,.JPG,.PNG,.JPEG",
      uploadUrl: window.ajaxUploadUrl + '/common/fileApi/file',
      uploadList: [],
      image: '',
      isUploadFinish: true
    }
  },
  methods: {
    syncFile(){
      if(this.verticalImage == "" && this.horizontalImage == "") {
        this.$message.error("请上传图片");
      }
      let medias = [];
      if(this.verticalImage != "") {
        medias.push(this.verticalImage)
      }
      if(this.horizontalImage != "") {
        medias.push(this.horizontalImage)
      }
      let params = {
        "medias": medias
      }
      service.syncAll(params).then((res) => {
        this.$message.success('同步成功')
      })
    },
    beforeUploadFile(file) {
      var suffix = "."+file.name.substring(file.name.lastIndexOf(".") + 1);
      if(this.mediaType == 2) {
        if(!this.imageFormat.includes(suffix)){
          this.$message.error('文件格式错误')
          return false;
        }
      }
      return true;
    },
    beforeAvatarUpload() {
      this.isUploadFinish = false
    },
    horizontalUploadSuccess(res, file) {
      res.data.forEach((item) => {
        item.mediaLink = item.file // 换个字段名
        this.horizontalImage = item.file
      })

      // this.saveFileContent(this.tmpList[this.tmpList.length - 1])
    },
    verticalUploadSuccess(res, file) {
      res.data.forEach((item) => {
        item.mediaLink = item.file // 换个字段名
        this.verticalImage = item.file
      })
    },
    uploadImageSuccess(res, file) {
      this.image = res.data[0].file
    },
    delFileIcon() {
      this.image = ''
    },
    transformUrlLink(url) {
      let final = url.substring(url.lastIndexOf(".") + 1)
      return final.toLowerCase()
    },
    confirm(){
      this.$emit('on-close')
    },
    handleClose() {
      console.log('isUploadFinish ---', this.isUploadFinish)
      if(!this.isUploadFinish) {
        this.$message.error('上传任务还未完成，请稍后再关闭')
        return
      }
      this.$emit('on-close')
    }
  }
}
</script>

<style scoped lang="scss">
  .manager-center-page{
    width: 100%;
    height: 92vh;
    background: white;
    padding: 15px;
    position: relative;

    .manger-form-body {
      display: flex;
      .manger-form-body-col{
        width: 7rem;
        text-align: center;
        margin: 0 auto;

        .upload-demo{
          .title{
            width: 80%;
            margin: 0 auto;
            color: #767676;
            line-height: 20px;

            a{
              color: #409EFF
            }
          }
        }
      }
    }
  }
  .buttonContainer{
    width: 100%;
    text-align: center;
    padding: 1rem 0;
  }
  .title{
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .avatar{
    width: 100%;
    height: 100%;
  }

</style>
